<template>
  <div class="home">
    <HeaderBar :username="this.username" />
    <hr style="background-color:#900712; margin-left:-5px; margin-right:-8px;" />
    <!--左侧菜单组件-->
    <div class="left-menu">
      <el-menu
        background-color="#610561"
        text-color="#fff"
        active-text-color="#ffd04b"
        :default-active="activeIndex"
        router
        unique-opened
      >
        <NavMenu :navMenus="this.leftMenus"></NavMenu>
      </el-menu>
    </div>
    <div class="right-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src || 'lsl' also can use Vue.use(HeaderBar) in main.js to install for globals.
import HeaderBar from "@/components/HeaderBar";
import NavMenu from "@/components/NavMenu";
export default {
  name: "home",
  data() {
    return {
      activeIndex: "",
      username: "",
      leftMenus: []
    };
  },
  mounted() {
    let start = window.location.href.lastIndexOf("/");
    let path = window.location.href.slice(start + 1);
    this.activeIndex = path;
  },

  created() {
    // 页面刷新时从后台获取菜单数据， 参数为用户名
    this.username = localStorage.getItem("user.name");
    this.leftMenus = JSON.parse(localStorage.getItem("user.menus"));
  },
  components: {
    HeaderBar,
    NavMenu
  },
  methods: {
    getCities: function(provinceCode) {
      this.$api.area.getCities(provinceCode).then(res => {
        if (!res) {
          return;
        }
        this.cities = res.body;
      });
    }
  }
};
</script>

<style scoped>
.left-menu {
  width: 203px;
  height: 613px;
  border-right: solid 0.1px #fff;
  margin-top: -8px;
  margin-left: -10px;
  float: left;
  background-color: #610561;
  overflow-y: auto;
  overflow-x: hidden;
}

.right-content {
  padding-left: 18px;
  padding-right: 6px;
  float: left;
  height: 608px;
  width: 1145px;
  /* background-color: #483d8b; */
  margin-top: -4px;
  overflow-x: auto;
  overflow-y: auto;
}
</style>